<template>
  <div class="uploadimg">
    <el-upload :action="actionUrl" :http-request="uploadFile" list-type="picture-card">
      <i class="el-icon-plus" />
      <div slot="tip" class="el-upload__tip fontColor">上传后，请点击保存后再次选择</div>
    </el-upload>
    <div class="imgList">
      <ul>
        <li
          v-for="(item,index) in fileList"
          :key="index"
          :class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"
          @mouseover="hoverIndex = index"
          @click="clickIndex = index;checkPic(item)">
          <img :src="item.img">
          <span>
            <i v-if="item.type !== 99" class="el-icon-delete" @click.stop="handleRemove(item)" />
            <label>{{ item.width }} × {{ item.height }}</label>
          </span>
          <i class="el-icon-circle-check"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import * as picture from '../../../api/picture.js'
export default {
  /* eslint-disable vue/require-prop-types */
  props: ['type', 'editorData', 'checkIndexStatus', 'clickNewIndex', 'checkId'],
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      deleteImageList: [],
      hoverIndex: -1, // 表示当前hover的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li
      clickIndex: -1 // 表示当前点击的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li
    }
  },
  beforeMount() {
    this.getImg()
    if (this.checkIndexStatus) {
      this.clickIndex = -1
    }
  },
  created() {
    this.fileList = []
    this.initUploadFileurl()
  },

  methods: {
    handleRemove(data) {
      var _this = this
      this.fileList.forEach(function(item, index) {
        if (data.id === item.id) {
          const deleteImg = _this.fileList.splice(index, 1)
          _this.deleteImageList.push(...deleteImg)
          console.log(_this.fileList)
        }
      })
      console.log(_this.deleteImageList)
      this.$emit('deleteSuccess', _this.deleteImageList)
    },

    check() {
      console.log('点击了')
    },

    initUploadFileurl() {
      this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
    },

    getImg() {
      picture.getPicList().then(res => {
        const that = this
        // console.log('响应的图库数据：')
        // console.log(JSON.stringify(res))
        if (res.status === 200) {
          // const imgdata = res.data
          this.fileList = res.data
          for (const i in this.fileList) {
            const img = new Image()
            img.src = this.fileList[i].img
            img.onload = function() {
              console.log('width', img.width)
              console.log('height', img.height)

              that.fileList[i].width = img.width
              that.fileList[i].height = img.height
            }
          }

          console.log('this.fileList', this.fileList)
        }
      })
    },

    uploadFile(content) {
      const fd = new FormData()
      fd.append('images', content.file)
      fd.append('resPath', this.resPath)
      const fileSize = fd.size / 1024 / 1024
      if (fileSize > 2) {
        this.$message({
          message: '上传图片不能大于2M',
          type: 'warning'
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        axios.post(content.action, fd).then(res => {
          loading.close()
          console.log(res)
          if (res.data.code === 1) {
            this.$emit('emitSuccess', res.data.data[0].maxImageUrl)
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            console.log(res.data.data)
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
      }
    },

    checkPic(item) {
      console.log('checkIndex')
      this.$emit('checkSuccess', item.img)
      this.$emit('checkId', item.id)
    }

  }
}
</script>

<style type="text/scss" lang="scss">
	.uploadimg{
    //padding: 20px 40px;
		overflow: hidden;
		clear: both;
    .el-upload-list--picture .el-upload-list__item{

    }
//     .el-upload-list--picture .el-upload-list__item:nth-child(2n){
//       float:right;
//     }
  }

	.imgList ul{overflow: hidden;padding: 0}
	.imgList ul li{position: relative;list-style:none;width:148px;height:148px;float:left;margin: 0 8px 8px 0;box-sizing: border-box;border-radius: 6px;border: 1px solid #c0ccda;position: relative;}
	.imgList ul li img{width:100%;height:100%;border-radius: 6px;}
	.imgList ul li span{
		position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
		border-radius: 6px;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: opacity .3s;
    transition: opacity .3s;}

	.hoverBg{

	}
	.clickBg{
			box-shadow:1px 1px 10px #333333
	}

	.imgList ul li.hoverBg span{
		opacity:1.0 ;

		}

	.imgList ul li span i.el-icon-delete{
			cursor: pointer;
			position: absolute;
// 			left:50%;
// 			top:50%;
// 			transform:translate(-50%,-50%)
			right:10%;
			top:10%;
		}
		.imgList ul li i.el-icon-circle-check{
			opacity: 0;
			font-size: 40px;
			color:#67C23A;
		}

	.imgList ul li.clickBg i.el-icon-circle-check{

			cursor: pointer;
			position: absolute;
			opacity: 1;
			left:50%;
			top:50%;
			transform:translate(-50%,-50%)
		}

		.imgList ul li label{
			position: absolute;
			left:5%;
			top:5%;
			font-size: 14px;

		}

		.fontColor{
			color:#ff0000;
		}

</style>
